<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>富文本编辑器</title>
  </head>
  <body>
    <iframe
      id="HtmlEdit"
      style="width:400px; height: 300px"
      marginWidth="2px"
      marginHeight="2px"
    ></iframe>
    <div id="butGroup">
      <button id="bold">加粗</button>
      <button id="copy">复制</button>
      <button id="big">变大</button>
      <button id="italic">斜体</button>
      <button id="underline">下划线</button>
      <button id="hiliteColor">背景色</button>

      <button id="save">上传</button>
    </div>
    <div
      id="box"
      style="height: 300px;width: 400px;border: 1px solid black"
    ></div>
  </body>
</html>
<script>
  const editor = document.getElementById("HtmlEdit").contentWindow; //获取iframe Window 对象
  const doc = document.getElementById("HtmlEdit").contentDocument; //获取iframe documen 对象
  const butGroup = document.getElementById("butGroup");
  const box = document.getElementById("box");
  //只需键入以下设定，iframe立刻变成编辑器。
  editor.document.designMode = "On"; //打开设计模式
  editor.document.contentEditable = true; // 设置元素为可编辑
  //设置事件监听
  butGroup.onclick = function(evt) {
    let e = evt || window.event;
    let targetId = e.target.id;
    //获取点击的标签的id
    switch (targetId) {
      case "bold":
        addBold();
        break;
      case "big":
        big();
        break;
      case "copy":
        copy();
        break;
      case "italic":
        italic();
        break;
      case "hiliteColor":
        hiliteColor();
        break;
      case "underline":
        underline();
        break;
      case "save":
        save();
        break;
    }
  };
  //字体变大方法
  function big() {
    //所有字体特效只是使用 execComman() 就能完成。
    editor.document.execCommand("fontSize", true, 5);
  }
  //复制方法
  function copy() {
    editor.document.execCommand("copy", true, null);
  }
  //加粗方法
  function addBold() {
    editor.document.execCommand("Bold", true, null);
  }
  //斜体方法
  function italic() {
    editor.document.execCommand("italic", true, null);
  }
  //加背景色
  var hiliteColor = () => {
    editor.document.execCommand("hiliteColor", true, "yellow");
  }; //ES6 的箭头函数写法

  //加下划线方法
  var underline = () => {
    editor.document.execCommand("underline", true, null);
  }; //ES6 的箭头函数写法

  //上传方法
  function save() {
    box.innerHTML = doc.body.innerHTML;
  }
</script>
